/**
 * @description  流动性风险
 * @author shenhong
 */
import React, { PureComponent } from 'react';
import { message, Row, Col } from 'antd';
import { FirstHeaderC, ModalC, DATA_ENTRY, NoQueryC, SecondHeaderC, PrimaryC, AdvancedSearch } from '../../../comps';
import moment from 'moment';
import _ from 'lodash';
import ShowEcharts from './showEcharts';
import TableOne from './tableOne';
import TableTwo from './tableTwo';
import MyModal from './myModal';
import style from './index.less';
import ShowArea from './textArea';

class LiquidityRisk extends PureComponent {
  constructor() {
    super();
    this.state = {
      formData: {},
      formData1: {},
      isShow: false,
      portfolioCode: '',
      portfolioCode1: '',
      isVisible: false,
      isVisible2: false,
      args1: {
        stockRate: 0.3,
        stockDays: 1,
        bondRate: 1.0,
        bondDays: 30,
        FundRate: 0.3,
        FundDays: 1,
      },
      args: {
        stockRate: 0.3,
        stockDays: 1,
        bondRate: 1.0,
        bondDays: 30,
        FundRate: 0.3,
        FundDays: 1,
      },
    };
  }
  componentDidMount() {}

  // 查询
  searchData = (e) => {
    this.checkData();
    this.setState({
      args: this.state.args1,
    });
  };
  // 校验数据是否符合规范
  checkData = () => {
    const { formData, portfolioCode } = this.state;
    if (JSON.stringify(formData) !== '{}' && formData.portfolioCode !== undefined && formData.portfolioCode !== '' && formData.dataDate !== undefined && formData.dataDate !== '') {
      this.setState({
        isShow: true,
        formData1: formData,
        portfolioCode1: portfolioCode,
      });
    } else {
      message.warning('请输入完整的查询条件');
      // this.setState({
      //   isShow:false
      // })
    }
  };

  // 点击参数预设按钮事件
  onclick = () => {
    this.setState(
      {
        isVisible: true,
      },
      () => {
        const { isVisible } = this.state;
        this.setState({
          isVisible2: isVisible,
        });
      },
    );
  };

  // modal框确定事件
  handleOk = () => {
    const data = this.child.getData();
    if (JSON.stringify(data) !== '{}') {
      this.setState(
        {
          args1: data,
          isVisible: false,
        },
        () => {
          const { isVisible } = this.state;
          this.setState({
            args: this.state.args1,
            isVisible2: isVisible,
          });
        },
      );
    }
  };

  //modal框取消事件
  handleCancel = () => {
    this.setState(
      {
        isVisible: false,
      },
      () => {
        this.child.resetDatas();
        const { isVisible } = this.state;
        this.setState({
          isVisible2: isVisible,
        });
      },
    );
  };

  //参数预设的modal框
  showModal = () => {
    const { isVisible, args } = this.state;
    const newProps = { visible: isVisible, title: `流动性风险参数预设`, width: 760 };

    return (
      <div>
        <ModalC
          {...newProps}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          // className={style.ModalBody}
        >
          <MyModal
            onRef={(ref) => (this.child = ref)} // 父组件对本组件的引用
            args={args}
          />
        </ModalC>
      </div>
    );
  };

  render() {
    const { isVisible2, formData1, isShow, portfolioCode1, args } = this.state;
    const defaultDays = moment().format('YYYY-MM-DD');
    const searchProps = {
      dataSource: [
        {
          dataIndex: 'portfolioCode',
          title: '组合名称',
          type: DATA_ENTRY.PRODUCTGROUPTREE,
          multiple: false,
          onChange: (e) => {
            if (e !== undefined) {
              const data = e.info;
              if (data) {
                this.setState({
                  args1: {
                    stockRate: 0.3,
                    stockDays: 1,
                    bondRate: 1.0,
                    bondDays: 30,
                    FundRate: 0.3,
                    FundDays: 1,
                  },
                  portfolioCode: data.portfolioCode,
                });
              }
            }
          },
        },
        {
          dataIndex: 'benchMark',
          title: '基准',
          type: DATA_ENTRY.BENCHMARK,
          allowClear: true,
        },
        {
          dataIndex: 'dataDate',
          title: '截止日期',
          type: DATA_ENTRY.SINGLEDATE,
          disableEnd: moment(defaultDays),
          initialValue: moment().subtract(1, 'days'),
        },
      ],
      onQuery: (e) => {
        const data = e;
        if (e.dataDate) {
          data.dataDate = e.dataDate.format('YYYY-MM-DD');
        }
        this.setState({ formData: data }, () => this.searchData(data));
      },
      onClear: () => {
        // const { form } = this.props;
        // form.resetFields();
        this.setState({
          args1: {
            stockRate: 0.3,
            stockDays: 1,
            bondRate: 1.0,
            bondDays: 30,
            FundRate: 0.3,
            FundDays: 1,
          },
        });
      },
    };
    return (
      <div className={style.body_area}>
        <div>
          <AdvancedSearch {...searchProps} />
        </div>
        {isShow ? (
          <div style={{ height: 'calc(100vh - 225px)', overflow: 'auto', overflowY: 'scroll', overflowX: 'hidden' }}>
            <div style={{ marginTop: '10px' }}>
              <PrimaryC title='参数预设' onClick={() => this.onclick()} />
            </div>
            <div style={{ marginTop: '10px' }}>
              <FirstHeaderC title='流动性摘要' />
              {isVisible2 ? this.showModal() : null}
            </div>
            <div>
              <Row>
                <Col span={12} className='bode_left'>
                  <SecondHeaderC title='七日累计变现比例' />
                  <div style={{ height: '305px' }} className='left_1'>
                    <ShowEcharts formData={formData1} portfolioCode={portfolioCode1} args={args} />
                  </div>
                </Col>
                <Col span={12} className='bode_right'>
                  <SecondHeaderC title='无冲击变现天数持仓分布' />
                  <div style={{ height: '305px' }}>
                    <TableOne formData={formData1} portfolioCode={portfolioCode1} args={args} />
                  </div>
                </Col>
              </Row>
            </div>
            <div style={{ marginTop: '20px' }}>
              <FirstHeaderC title='流动性明细' />
              <TableTwo formData={formData1} portfolioCode={portfolioCode1} args={args} />
            </div>
            <div style={{ marginTop: '10px' }}>
              <ShowArea args={args} />
            </div>
          </div>
        ) : (
          <div style={{ marginTop: '10px' }}>
            <NoQueryC />
          </div>
        )}
      </div>
    );
  }
}
export default LiquidityRisk;
